<template>
  <div class="container">
    <div class="topTitleTab">
      <span>当前位置：首页 > 搜索</span>
    </div>
    <div class="listBox">
      <schoolitem
        v-if="searchList.length > 0 && searchType == '驾校'"
        v-for="(item, i) in searchList"
        :key="i"
        :drivingSchoolItem="item"
      ></schoolitem>
      <coachItem
        v-if="searchList.length > 0 && searchType == '教练'"
        v-for="(coachitem, i) in searchList"
        :coachitem="coachitem"
        :key="i"
      ></coachItem>
      <coachItem
        v-if="searchList.length > 0 && searchType == '陪练'"
        v-for="(coachitem, i) in searchList"
        :coachitem="coachitem"
        :iscoach="false"
        :key="i"
      ></coachItem>
      <articleItem
        v-if="searchList.length > 0 && searchType == '指南'"
        v-for="(articleItem, i) in searchList"
        :key="i"
        :articleItem="articleItem"
      ></articleItem>
      <el-pagination
        v-if="searchList.length > 0"
        @size-change="handleSizeChange"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next"
        :total="pagination.total"
      >
      </el-pagination>
      <div class="nodataBox" v-if="searchList.length == 0">
        <img src="~/assets/images/nodata.png" alt="" />
        <span class="tips">暂无数据</span>
      </div>
    </div>
  </div>
</template>
<script>
import { school, coach, article } from "~/api/commen";
import schoolitem from "@/components/schoolitem.vue";
import coachItem from "@/components/coachItem.vue";
import articleItem from "@/components/articleItem.vue";
export default {
  components: { schoolitem, coachItem, articleItem },
  data() {
    return {
        page: 1,
      rows: 10,
    };
  },
  async asyncData({ app, query, params }) {
    let { searchType, keyword } = { ...query };
  

    searchType=decodeURIComponent(searchType)

    keyword=decodeURIComponent(keyword)

    let searchList;
    if (searchType == "驾校") {
      searchList = await school({ page: 1, rows: 10, keyword: keyword });
    } else if (searchType == "教练") {
      searchList = await coach({ page: 1, rows: 10, keyword: keyword });
    } else if (searchType == "陪练") {
      searchList = await coach({
        page: 1,
        rows: 10,
        coachType: "train",
        keyword: keyword,
      });
    } else if (searchType == "指南") {
      searchList = await article({ page: 1, rows: 10, keyword: keyword });
    }

    return {
      searchType: searchType,
      searchList: searchList.list,
      pagination: searchList.page,
      keyword :keyword 
    };
  },
   watchQuery: ['searchType','keyword'],
  methods: {
    handleSizeChange(val) {
      this.rows = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    async getList() {
      let searchList;
      let searchType = this.searchType;
      let keyword=this.keyword
      if (searchType == "驾校") {
        searchList = await school({ page: this.page, rows:  this.rows , keyword: keyword });
      } else if (searchType == "教练") {
        searchList = await coach({ page: this.page, rows:  this.rows , keyword: keyword });
      } else if (searchType == "陪练") {
        searchList = await coach({
          page: 1,
          rows: 10,
          coachType: "train",
          keyword: keyword,
        });
      } else if (searchType == "指南") {
        searchList = await article({ page: this.page, rows:  this.rows , keyword: keyword });
      }
      this.searchList=searchList.list
      this.pagination= searchList.page
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep {
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
.listBox {
  padding-bottom: 180px;
}
</style>